<!doctype html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#d1{
			width:400px;
			height:400px;
			background:red;
			/*目的：解决子元素外边距溢出*/
			border:1px solid transparent;
		}
		#d2{
			width:300px;
			height:300px;
			background:yellow;
			margin:50px auto;
			/*目的：解决子元素外边距溢出*/
			border:1px solid transparent;
		}
		#d3{
			width:200px;
			height:200px;
			background:purple;
			margin:50px auto;
		}
	</style>
	<script src="jquery-1.11.3.js"></script>
	<script>
		$(function(){
			$("#d1").click(function(){
				alert("您点击了d1");
			});

			$("#d2").click(function(){
				alert("您点击了d2");
			});

			$("#d3").click(function(event){
				alert("您点击了d3");
				//阻止事件冒泡
				event.stopPropagation();
			});
		});
	</script>
</head>
<body>
	<div id="d1">
		<div id="d2">
			<div id="d3"></div>
		</div>
	</div>
</body>
</html>